<template>
<div class="home-box" style="margin-left:20px;">
    <el-form :inline="true" :model="searchForm">
      <el-form-item label="岗位名称">
        <el-input
          v-model="searchForm.position"
          placeholder="岗位名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="searchEvent" type="primary">查询 </el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="update" type="primary">重置 </el-button>
      </el-form-item>
      <el-form-item >
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button circle icon="Refresh" @click="update" />
        </el-tooltip>
      </el-form-item>
    </el-form>
  </div>
  <el-tooltip class="item" effect="dark" content="该操作将会复制上个月的评分条目以及岗位绩效中的评分条目" placement="top">
  <el-button type="success" plain icon="Check" @click="handleCopy"
    >复制上月</el-button
  >
  </el-tooltip>
  <!--<el-button color="#626aef" :dark="isDark" plain icon="Download" @click="handleOut"
    >导出</el-button
  >-->
  <el-table :data="PositionList" style="width: 100%;margin:20px auto; border-radius: 5px;box-shadow: 5px 5px 10px rgba(64, 158, 255, 0.5);" size="large" 
    :header-cell-style="{
          'background': '#337ecc !important',
          'color': '#ffffff',
          'border': 'none !important'
        }">
    <el-table-column prop="position" label="岗位" width="120" class-name="my-content">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>备注：{{ scope.row.ins }}</div>
          </template>
          <template #reference>
            {{ scope.row.position }}
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column prop="deptName" label="所属部门" width="120" />
    <el-table-column prop="fourthAssessorName" label="初审人员" width="100" />
    <el-table-column prop="fourthTimer" label="初审限时" width="100">
      <template #default="scope">
        {{
         scope.row.fourthTimer === 'PT12H' ? '12小时' : 
         scope.row.fourthTimer === 'P1D' ? '24小时' : 
         scope.row.fourthTimer === 'PT36H' ? '36小时' : 
         scope.row.fourthTimer === 'P2D' ? '48小时' :
		  scope.row.fourthTimer === 'PT60H' ? "60小时":"72小时"
         }}
      </template>
    </el-table-column>
    <el-table-column prop="thirdAssessorName" label="复审人员" width="100" />
    <el-table-column prop="thirdTimer" label="复审限时" width="100">
      <template #default="scope">
        {{
        scope.row.thirdTimer === 'PT12H' ? '12小时' : 
         scope.row.thirdTimer === 'P1D' ? '24小时' : 
         scope.row.thirdTimer === 'PT36H' ? '36小时' : 
         scope.row.thirdTimer === 'P2D' ? '48小时' : 
		 scope.row.thirdTimer === 'PT60H' ? "60小时":"72小时"
         }}
      </template>
    </el-table-column>
    <el-table-column prop="secondAssessorName" label="终审人员" width="100" />
    <el-table-column prop="secondTimer" label="终审限时" width="100">
      <template #default="scope">
        {{
        scope.row.secondTimer === 'PT12H' ? '12小时' : 
         scope.row.secondTimer === 'P1D' ? '24小时' : 
         scope.row.secondTimer === 'PT36H' ? '36小时' : 
         scope.row.secondTimer === 'P2D' ? '48小时' : 
		 scope.row.secondTimer === 'PT60H' ? "60小时":"72小时"
         }}
      </template>
    </el-table-column>
    <el-table-column prop="auditStatus" label="考核状态" width="110">
      <template #default="scope">
        <el-tag
          :type="scope.row.auditStatus === 0 ? 'info' : 
          (scope.row.auditStatus === 1 ? 'primary' :
          (scope.row.auditStatus === 2 ? 'warning' :
          (scope.row.auditStatus === 3 ? 'success' :'danger')))"
          disable-transitions
          >{{
            scope.row.auditStatus === 0? "未考核": 
            (scope.row.auditStatus === 1? "考核中": 
            (scope.row.auditStatus === 2? "暂停": 
            (scope.row.auditStatus === 2? "考核完成": "未知")))
          }}</el-tag
        >
      </template>
    </el-table-column>
    <el-table-column prop="updateTime" label="最后更新时间" width="210">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button v-show="scope.row.auditStatus === 0" @click="handleEdit(scope.$index, scope.row)" round>编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <pagination
    class="pagination"
    v-show="PositionPage.total > 0"
    :total="PositionPage.total"
    v-model:page="searchForm.page"
    v-model:limit="PositionPage.size"
    @pagination="handlePagination"
  />
  <Dialog2 v-model="dialog_2Visible" :close="close" :update="update" :editForm="editForm"
    :title="title"></Dialog2>
    <FormDialog
    v-model="dialog"
    :close="closeForm"
    :update="update"
  ></FormDialog>
</template>


<script setup>
import {ref, onMounted,onBeforeMount, reactive,watch} from "vue";
import { Timer } from '@element-plus/icons-vue';
import {useRouter} from "vue-router";
import Dialog2 from './assessorDialog'
import FormDialog from "./assessorForm";
import {getAssessorTimerPage,copyAssessorTimer,getAssessorSearch} from '@/api/assessor'
import { ElMessage } from 'element-plus'

const searchForm = ref({
  position:"",
  page: 1,
  page_size: 10,
});
const PositionPage=ref([])
const PositionList=ref([])
onBeforeMount(()=>{
    getAssessorTimerPage(searchForm.value)
    .then(data=>{
        PositionPage.value=data.data;
        PositionList.value=data.data.records;
    });
})
watch(PositionList, (newVal) => {
  
}, { deep: true })

const handlePagination = (value) => {
  if(searchForm.value.position==""){
    getAssessorTimerPage(value)
    .then(data=>{
        PositionPage.value=data.data;
        PositionList.value=data.data.records;
    });
  }
  else{
    searchForm.value.page=value.page;
    searchForm.value.page_size=value.page_size
    getAssessorSearch(searchForm.value).then(data=>{
      PositionPage.value=data.data;
      PositionList.value=data.data.records;
    })
  }
};

const searchEvent=()=>{
  getAssessorSearch(searchForm.value).then(data=>{
      PositionPage.value=data.data;
      PositionList.value=data.data.records;
    })
}

const dialog = ref(false);
const handleCopy=()=>{
  dialog.value = true;
}
const closeForm = () => {
  dialog.value = false;
};

const editForm=ref()
const dialog_2Visible=ref()
const handleEdit = (index, row) => {
  dialog_2Visible.value = true
  editForm.value=row
};

const close=()=>{
  dialog_2Visible.value=false
}
const update=()=>{
  searchForm.position=""
    getAssessorTimerPage(searchForm.value)
    .then(data=>{
      if (data.code == 200) {
      ElMessage({
        message: "更新成功",
        type: "success",
      });
      PositionPage.value=data.data;
        PositionList.value=data.data.records;
    } else {
      ElMessage.error("更新失败");
    }
    });
}
</script>

<style lang="scss" scoped>
:deep(.my-content) {
  background:#ECF5FF !important;
  font-size: 15px;
}
.pagination {
    margin: 20px 50px;
    display: flex;
    justify-content: end;
}
</style>
